<template>
  <div class="bigBox">
    <el-container>
      <el-main>
        <el-row style="background-color: #fff; padding: 15px">
          <div class="box">
            <el-col :span="24" style="display: flex; justify-content: flex-end">
              <el-button round @click="backTo">返回</el-button>
            </el-col>
          </div>
        </el-row>
        <el-row
          style="
            background-color: #fff;
            height: 70px;
            /* border: 1px solid #e9e9e9; */
            box-sizing: border-box;
            padding: 15px;
          "
        >
          <div style="display: flex; align-items: center">
            <el-col :span="24">
              <div style="display: flex; align-items: center">
                <div style="display: flex; position: relative">
                  <div>
                    <span style="font-weight: 700; font-size: 18px"
                      >订单详情</span
                    >
                  </div>
                  <div style="margin-left: 20px">
                    <span style="font-weight: 400; color: #0079fe">●</span>
                    <span
                      style="font-weight: 400; font-size: 12px; color: #666666"
                      >待付款</span
                    >
                  </div>
                </div>
                <div style="position: absolute; right: 15px">
                  <el-button type="primary">设为已付款</el-button>
                  <el-button type="primary">设为已发货</el-button>
                  <el-button type="primary">设为已完成</el-button>
                  <el-button type="primary">设为已核销</el-button>
                  <el-button type="primary">设为已取消</el-button>
                </div>
              </div>
            </el-col>
          </div>
        </el-row>
        <el-row style="background-color: #fff">
          <div
            style="
              height: 1px;
              width: 100%;
              background-color: #e9e9e9;
              margin-top: 10px;
              margin-bottom: 10px;
              padding: 15xp;
            "
          ></div>
        </el-row>
        <el-row style="padding: 0 15px; background-color: #fff">
          <div
            style="
              background-color: #e9e9e9;
              width: 100%;
              border-radius: 10px 10px 0px 0px;
            "
          >
            <p>
              <span style="font-weight: 400">&nbsp;</span>
              <span style="font-weight: 700; font-size: 14px">基本信息</span>
            </p>
          </div>
        </el-row>
        <el-row style="background-color: #fff">
          <el-descriptions
            :column="2"
            border
            style="width: 100%; padding: 0 15px"
          >
            <el-descriptions-item
              label="订单号:"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
              width="70px;"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="收获人:" width="70px;" align="center"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item
              label="订单总金额:"
              width="70px;"
              align="center"
              >Suzhou</el-descriptions-item
            >
            <el-descriptions-item
              label="收货地址:"
              width="70px;"
              align="center"
            >
              <el-tag size="small">School</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="付款方式:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="收货手机:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="客户:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="收获电话:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="下单日期:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="物流信息:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="付款时间:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="订单备注:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="发货时间:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
            <el-descriptions-item label="订单类型:" width="70px;" align="center"
              >1111</el-descriptions-item
            >
          </el-descriptions>
        </el-row>
        <el-row style="background-color: #fff; height: 20px"></el-row>
        <el-row style="padding: 0 15px; background-color: #fff">
          <div
            style="
              background-color: #e9e9e9;
              width: 100%;
              border-radius: 10px 10px 0px 0px;
            "
          >
            <p>
              <span style="font-weight: 400">&nbsp;</span>
              <span style="font-weight: 700; font-size: 14px">商品信息</span>
            </p>
          </div>
        </el-row>
        <el-row style="background-color: #fff">
          <el-descriptions
            direction="vertical"
            :column="4"
            style="width: 100%; padding: 0 15px"
            border
          >
            <el-descriptions-item label="商品名称" align="center"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="单价" align="center"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item label="数量" align="center"
              >Suzhou</el-descriptions-item
            >
            <el-descriptions-item label="商品总价" align="center">
              <el-tag size="small">School</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
        <el-row style="background-color: #fff; height: 40px"></el-row>
        <el-row
          style="
            background-color: #fff;
            display: flex;
            justify-content: flex-end;
          "
        >
          <el-descriptions class="margin-top" :column="1">
            <el-descriptions-item label="运费：">￥0.00</el-descriptions-item>
            <el-descriptions-item label="优惠：">￥0.00</el-descriptions-item>
            <el-descriptions-item label="积分：">0</el-descriptions-item>
            <el-descriptions-item label="订单金额：">
              ￥10000.00
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
        <el-row style="background-color: #fff; height: 40px"></el-row>
        <el-row style="background-color: #fff; height: 40px"></el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const backTo = () => {
  router.push("/mainView/ShoppingMallOrder");
};
</script>

<style scoped>
.bigBox {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.box {
  width: 100%;
  height: 100%;
  /* background-color: red; */
  /* padding: 50px, 0px; */
  /* padding: 20px 0px; */
  display: flex;
  justify-content: center;
}
/* .my-label {
  background-color: #e9e9e9;
}
.my-content {
  background-color: #e9e9e9;
} */
</style>
